<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cartzilla | Testimonials / reviews</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="../safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- Vendor Styles including: Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="../vendor/simplebar/dist/simplebar.min.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/tiny-slider/dist/tiny-slider.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/themes/prism.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/toolbar/prism-toolbar.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="../css/theme.min.css">
    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body>
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>
    <main class="container-fluid">
      <!-- Main content-->
      <section class="offcanvas-enabled row pb-3 pb-md-4">
        <div class="col-xxl-9">
          <!-- Navbar-->
          <header class="navbar navbar-expand navbar-light fixed-top bg-light shadow-sm px-3 px-lg-4" data-scroll-header data-fixed-element><a class="navbar-brand d-lg-none" href="typography.html"><img src="../img/logo-dark.png" width="142" alt="Cartzilla"></a>
            <ul class="navbar-nav ms-auto d-none d-lg-flex">
              <li class="nav-item"><a class="nav-link" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live preview</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
              <li class="nav-item"><a class="nav-link" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
            </ul>
            <button class="navbar-toggler d-block d-lg-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#components-nav"><span class="navbar-toggler-icon"></span></button><a class="btn btn-primary btn-shadow ms-2 ms-lg-4" href="https://themes.getbootstrap.com/product/cartzilla-bootstrap-e-commerce-template-ui-kit/" target="_blank" rel="noopener"><i class="ci-cart me-2 d-none d-sm-inline-block"></i>Buy now</a>
          </header>
          <!-- Side navigation-->
          <aside class="offcanvas offcanvas-expand bg-dark" id="components-nav">
            <div class="offcanvas-cap bg-darker d-none d-lg-block"><a class="navbar-brand py-1" href="typography.html"><img src="../img/logo-light.png" width="142" alt="Cartzilla"></a><span class="badge bg-info">Components</span></div>
            <div class="offcanvas-cap bg-darker align-items-center d-flex d-lg-none">
              <div class="d-flex align-items-center">
                <h5 class="text-light mb-0 me-2">Menu</h5><span class="badge bg-info">Components</span>
              </div>
              <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" data-simplebar data-simplebar-auto-hide="true">
              <div class="pt-4 pb-3 mt-lg-3">
                <div class="d-flex d-lg-none pb-4 mb-4 border-bottom border-light"><a class="btn btn-outline-light btn-sm me-3" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live demo</a><a class="btn btn-light btn-sm ps-2" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Content</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="typography.html">Typography</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="icon-font.html">Icon font</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="code.html">Code</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="images.html">Images &amp; figures</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tables.html">Tables</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Components</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="accordion.html">Accordion</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="alerts.html">Alerts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="badge.html">Badges</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="blog-components.html">Blog components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="breadcrumb.html">Breadcrumb</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="buttons.html">Buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="button-group.html">Button group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="cards.html">Cards</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="carousel.html">Carousel</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="charts.html">Charts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="collapse.html">Collapse</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="contacts-card.html">Contacts card</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="countdown.html">Countdown</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="dropdowns.html">Dropdowns</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="footer.html">Footer</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="forms.html">Forms</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="gallery.html">Gallery</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="input-group.html">Input group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="list-group.html">List group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="modal.html">Modal</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="navbar.html">Navbar</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pagination.html">Pagination</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pills.html">Pills</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="popovers.html">Popovers</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="progress.html">Progress</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="shop-components.html">Shop components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="social-buttons.html">Social buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="spinners.html">Spinners</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="steps.html">Steps</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tabs.html">Tabs</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="team.html">Team</a></li>
                    <li class="widget-list-item active"><a class="widget-list-link" href="testimonials.html">Testimonials / reviews</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="toasts.html">Toasts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tooltips.html">Tooltips</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="video-button.html">Video button</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="widgets.html">Widgets</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light mb-4 pb-2">
                  <h3 class="widget-title text-white">Utilities</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="https://getbootstrap.com/docs/5.0/utilities/borders/" target="_blank" rel="noopener">Bootstrap</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="utilities.html">Cartzilla</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </aside>
          <!-- Page title-->
          <div class="border-bottom mt-lg-2 pt-5 pb-2 mb-5">
            <h1 class="mt-3 mt-lg-4 pt-5">Testimonials / reviews</h1>
            <div class="d-flex flex-wrap flex-md-nowrap justify-content-between">
              <p class="text-muted">Component is designed to showcase testimonials from satisfied clients or reviews of the products on your website.</p>
              <div class="ps-md-4 mb-3"><span class="badge bg-info">Cartzilla component</span></div>
            </div>
          </div>
          <!-- Testimonial-->
          <section class="pb-5 mb-md-2" id="testimonial">
            <h2 class="h5 mb-3">Testimonial</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result1" data-bs-toggle="tab" role="tab" aria-controls="result1" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html1" data-bs-toggle="tab" role="tab" aria-controls="html1" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug1" data-bs-toggle="tab" role="tab" aria-controls="pug1" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result1" role="tabpanel">
                    <blockquote class="testimonial mb-2" style="max-width: 25rem;">
                      <div class="card border-0 shadow-sm"><span class="testimonial-mark"></span>
                        <div class="card-body fs-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                      </div>
                      <footer class="d-flex justify-content-center align-items-center pt-4"><img class="rounded" src="../img/testimonials/01.jpg" width="50" alt="Mary Grant">
                        <div class="ps-3">
                          <h6 class="fs-sm mb-n1">Mary Alice Grant</h6><span class="fs-ms text-muted">Desperate housewife</span>
                        </div>
                      </footer>
                    </blockquote>
                  </div>
                  <div class="tab-pane fade" id="html1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Testimonial --&gt;
&lt;blockquote class=&quot;testimonial&quot;&gt;
  &lt;div class=&quot;card border-0 shadow-sm&quot;&gt;
    &lt;span class=&quot;testimonial-mark&quot;&gt;&lt;/span&gt;
    &lt;div class=&quot;card-body fs-md&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/div&gt;
  &lt;/div&gt;
  &lt;footer class=&quot;d-flex justify-content-center align-items-center pt-4&quot;&gt;
    &lt;img class=&quot;rounded&quot; width=&quot;50&quot; src=&quot;path-to-picture&quot; alt=&quot;Mary Grant&quot;/&gt;
    &lt;div class=&quot;ps-3&quot;&gt;
      &lt;h6 class=&quot;fs-sm mb-n1&quot;&gt;Mary Alice Grant&lt;/h6&gt;
      &lt;span class=&quot;fs-ms text-muted&quot;&gt;Desperate housewife&lt;/span&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
&lt;/blockquote&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Testimonial
blockquote.testimonial
  .card.border-0.shadow-sm
    span.testimonial-mark
    .card-body.fs-md
      | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  footer.d-flex.justify-content-center.align-items-center.pt-4
    img(src=&quot;path-to-picture&quot;, width=&quot;50&quot;, &quot;Mary Grant&quot;).rounded
    .ps-3
      h6.fs-sm.mb-n1 Mary Alice Grant
      span.fs-ms.text-muted Desperate housewife
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Testimonials carousel-->
          <section class="pb-5 mb-md-2" id="testimonials-carousel">
            <h2 class="h5 mb-3">Testimonials carousel</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result2" data-bs-toggle="tab" role="tab" aria-controls="result2" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html2" data-bs-toggle="tab" role="tab" aria-controls="html2" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug2" data-bs-toggle="tab" role="tab" aria-controls="pug2" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result2" role="tabpanel">
                    <div class="tns-carousel pt-2">
                      <div class="tns-carousel-inner" data-carousel-options="{&quot;items&quot;: 2, &quot;controls&quot;: false, &quot;responsive&quot;: {&quot;0&quot;:{&quot;items&quot;:1},&quot;750&quot;:{&quot;items&quot;:2, &quot;gutter&quot;: 20},&quot;991&quot;:{&quot;items&quot;:3, &quot;gutter&quot;: 30}}}">
                        <blockquote class="testimonial mb-2">
                          <div class="card border-0 shadow-sm"><span class="testimonial-mark"></span>
                            <div class="card-body fs-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                          </div>
                          <footer class="d-flex justify-content-center align-items-center pt-4"><img class="rounded" src="../img/testimonials/01.jpg" width="50" alt="Mary Grant">
                            <div class="ps-3">
                              <h6 class="fs-sm mb-n1">Mary Alice Grant</h6><span class="fs-ms text-muted">Desperate housewife</span>
                            </div>
                          </footer>
                        </blockquote>
                        <blockquote class="testimonial mb-2">
                          <div class="card border-0 shadow-sm"><span class="testimonial-mark"></span>
                            <div class="card-body fs-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                          </div>
                          <footer class="d-flex justify-content-center align-items-center pt-4"><img class="rounded" src="../img/testimonials/02.jpg" width="50" alt="Mary Grant">
                            <div class="ps-3">
                              <h6 class="fs-sm mb-n1">Adrian Lewis</h6><span class="fs-ms text-muted">Shopaholic</span>
                            </div>
                          </footer>
                        </blockquote>
                        <blockquote class="testimonial mb-2">
                          <div class="card border-0 shadow-sm"><span class="testimonial-mark"></span>
                            <div class="card-body fs-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                          </div>
                          <footer class="d-flex justify-content-center align-items-center pt-4"><img class="rounded" src="../img/testimonials/04.jpg" width="50" alt="Mary Grant">
                            <div class="ps-3">
                              <h6 class="fs-sm mb-n1">Sara Palson</h6><span class="fs-ms text-muted">Merchant</span>
                            </div>
                          </footer>
                        </blockquote>
                        <blockquote class="testimonial mb-2">
                          <div class="card border-0 shadow-sm"><span class="testimonial-mark"></span>
                            <div class="card-body fs-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                          </div>
                          <footer class="d-flex justify-content-center align-items-center pt-4"><img class="rounded" src="../img/testimonials/03.jpg" width="50" alt="Mary Grant">
                            <div class="ps-3">
                              <h6 class="fs-sm mb-n1">Richard Davis</h6><span class="fs-ms text-muted">Shopaholic</span>
                            </div>
                          </footer>
                        </blockquote>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Testimonials carousel --&gt;
&lt;div class=&quot;tns-carousel&quot;&gt;
  &lt;div class=&quot;tns-carousel-inner&quot; data-carousel-options='{&quot;items&quot;: 2, &quot;controls&quot;: false, &quot;responsive&quot;: {&quot;0&quot;:{&quot;items&quot;:1},&quot;750&quot;:{&quot;items&quot;:2, &quot;gutter&quot;: 20},&quot;991&quot;:{&quot;items&quot;:3, &quot;gutter&quot;: 30}}}'&gt;
    &lt;blockquote class=&quot;testimonial mb-2&quot;&gt;
      &lt;div class=&quot;card border-0 shadow-sm&quot;&gt;&lt;span class=&quot;testimonial-mark&quot;&gt;&lt;/span&gt;
        &lt;div class=&quot;card-body fs-md&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/div&gt;
      &lt;/div&gt;
      &lt;footer class=&quot;d-flex justify-content-center align-items-center pt-4&quot;&gt;
        &lt;img class=&quot;rounded&quot; width=&quot;50&quot; src=&quot;path-to-picture&quot; alt=&quot;Mary Grant&quot;/&gt;
        &lt;div class=&quot;ps-3&quot;&gt;
          &lt;h6 class=&quot;fs-sm mb-n1&quot;&gt;Mary Alice Grant&lt;/h6&gt;
          &lt;span class=&quot;fs-ms text-muted&quot;&gt;Desperate housewife&lt;/span&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
    &lt;/blockquote&gt;

    &lt;blockquote class=&quot;testimonial mb-2&quot;&gt;
      ...
    &lt;/blockquote&gt;

    &lt;!-- Add as many testimonials as you need --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Testimonials carousel
.tns-carousel
  .tns-carousel-inner(data-carousel-options='{&quot;items&quot;: 2, &quot;controls&quot;: false, &quot;responsive&quot;: {&quot;0&quot;:{&quot;items&quot;:1},&quot;750&quot;:{&quot;items&quot;:2, &quot;gutter&quot;: 20},&quot;991&quot;:{&quot;items&quot;:3, &quot;gutter&quot;: 30}}}')

    blockquote.testimonial.mb-2
      .card.border-0.shadow-sm
        span.testimonial-mark
        .card-body.fs-md
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      footer.d-flex.justify-content-center.align-items-center.pt-4
        img(src=&quot;path-to-picture&quot;, width=&quot;50&quot;, alt=&quot;Mary Grant&quot;).rounded
        .ps-3
          h6.fs-sm.mb-n1 Mary Alice Grant
          span.fs-ms.text-muted Desperate housewife

    blockquote.testimonial.mb-2
      ...

    //- Add as many testimonials as you need
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Product review-->
          <section class="pb-5 mb-md-2" id="product-review">
            <h2 class="h5 mb-3">Product review</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result3" data-bs-toggle="tab" role="tab" aria-controls="result3" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html3" data-bs-toggle="tab" role="tab" aria-controls="html3" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug3" data-bs-toggle="tab" role="tab" aria-controls="pug3" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result3" role="tabpanel">
                    <div class="product-review py-2" style="max-width: 45rem;">
                      <div class="d-flex mb-3">
                        <div class="d-flex align-items-center me-4 pe-2"><img class="rounded-circle" src="../img/shop/reviews/01.jpg" width="50" alt="Rafael Marquez">
                          <div class="ps-3">
                            <h6 class="fs-sm mb-0">Rafael Marquez</h6><span class="fs-ms text-muted">June 28, 2019</span>
                          </div>
                        </div>
                        <div>
                          <div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star"></i>
                          </div>
                          <div class="fs-ms text-muted">83% of users found this review helpful</div>
                        </div>
                      </div>
                      <p class="fs-md mb-2">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est...</p>
                      <ul class="list-unstyled fs-ms pt-1">
                        <li class="mb-1"><span class="fw-medium">Pros:&nbsp;</span>Consequuntur magni, voluptatem sequi, tempora</li>
                        <li class="mb-1"><span class="fw-medium">Cons:&nbsp;</span>Architecto beatae, quis autem</li>
                      </ul>
                      <div class="text-nowrap">
                        <button class="btn-like" type="button">15</button>
                        <button class="btn-dislike" type="button">3</button>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html3" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Product review --&gt;
&lt;div class=&quot;product-review&quot;&gt;
  &lt;div class=&quot;d-flex mb-3&quot;&gt;
    &lt;div class=&quot;d-flex align-items-center me-4 pe-2&quot;&gt;
      &lt;img class=&quot;rounded-circle&quot; width=&quot;50&quot; src=&quot;path-to-picture&quot; alt=&quot;Rafael Marquez&quot;/&gt;
      &lt;div class=&quot;ps-3&quot;&gt;
        &lt;h6 class=&quot;fs-sm mb-0&quot;&gt;Rafael Marquez&lt;/h6&gt;
        &lt;span class=&quot;fs-ms text-muted&quot;&gt;June 28, 2019&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class=&quot;star-rating&quot;&gt;
        &lt;i class=&quot;star-rating-icon ci-star-filled active&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;star-rating-icon ci-star-filled active&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;star-rating-icon ci-star-filled active&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;star-rating-icon ci-star-filled active&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;star-rating-icon ci-star&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class=&quot;fs-ms text-muted&quot;&gt;83% of users found this review helpful&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;p class=&quot;fs-md mb-2&quot;&gt;Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est...&lt;/p&gt;
  &lt;ul class=&quot;list-unstyled fs-ms pt-1&quot;&gt;
    &lt;li class=&quot;mb-1&quot;&gt;
      &lt;span class=&quot;fw-medium&quot;&gt;Pros: &lt;/span&gt;Consequuntur magni, voluptatem sequi, tempora
    &lt;/li&gt;
    &lt;li class=&quot;mb-1&quot;&gt;
      &lt;span class=&quot;fw-medium&quot;&gt;Cons: &lt;/span&gt;Architecto beatae, quis autem
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class=&quot;text-nowrap&quot;&gt;
    &lt;button class=&quot;btn-like&quot; type=&quot;button&quot;&gt;15&lt;/button&gt;
    &lt;button class=&quot;btn-dislike&quot; type=&quot;button&quot;&gt;3&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug3" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Product review
.product-review
  .d-flex.mb-3
    .d-flex.align-items-center.me-4.pe-2
      img(src=&quot;path-to-picture&quot;, width=&quot;50&quot;, alt=&quot;Rafael Marquez&quot;).rounded-circle
      .ps-3
        h6.fs-sm.mb-0 Rafael Marquez
        span.fs-ms.text-muted June 28, 2019
    div
      +star-rating(4)
      .fs-ms.text-muted 83% of users found this review helpful
  p.fs-md.mb-2 Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est...
  ul.list-unstyled.fs-ms.pt-1
    li.mb-1
      span.fw-medium Pros:&nbsp;
      | Consequuntur magni, voluptatem sequi, tempora
    li.mb-1
      span.fw-medium Cons:&nbsp;
      | Architecto beatae, quis autem
  .text-nowrap
    button(type=&quot;button&quot;).btn-like 15
    button(type=&quot;button&quot;).btn-dislike 3
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Post comment-->
          <section class="pb-5 mb-md-2" id="post-comment">
            <h2 class="h5 mb-3">Post comment</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result4" data-bs-toggle="tab" role="tab" aria-controls="result4" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html4" data-bs-toggle="tab" role="tab" aria-controls="html4" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug4" data-bs-toggle="tab" role="tab" aria-controls="pug4" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result4" role="tabpanel">
                    <div class="d-flex align-items-start py-2" style="max-width: 45rem;"><img class="rounded-circle" src="../img/testimonials/04.jpg" width="50" alt="Laura Willson">
                      <div class="ps-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                          <h6 class="fs-md mb-0">Laura Willson</h6><a class="nav-link-style fs-sm fw-medium" href="#"><i class="ci-reply me-2"></i>Reply</a>
                        </div>
                        <p class="fs-md mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><span class="fs-ms text-muted"><i class="ci-time align-middle me-2"></i>Sep 7, 2019</span>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html4" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Post comment --&gt;
&lt;div class=&quot; d-flex align-items-start&quot;&gt;
  &lt;img class=&quot;rounded-circle&quot; width=&quot;50&quot; src=&quot;path-to-picture&quot; alt=&quot;Laura Willson&quot;/&gt;
  &lt;div class=&quot;ps-3&quot;&gt;
    &lt;div class=&quot;d-flex justify-content-between align-items-center mb-2&quot;&gt;
      &lt;h6 class=&quot;fs-md mb-0&quot;&gt;Laura Willson&lt;/h6&gt;
      &lt;a class=&quot;nav-link-style fs-sm fw-medium&quot; href=&quot;#&quot;&gt;
        &lt;i class=&quot;ci-reply me-2&quot;&gt;&lt;/i&gt;
        Reply
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;p class=&quot;fs-md mb-1&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
    &lt;span class=&quot;fs-ms text-muted&quot;&gt;
      &lt;i class=&quot;ci-time align-middle me-2&quot;&gt;&lt;/i&gt;
      Sep 7, 2019
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug4" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Post comment
.d-flex.align-items-start
  img(src=&quot;path-to-picture&quot;, width=&quot;50&quot;, alt=&quot;Laura Willson&quot;).rounded-circle
  .ps-3
    .d-flex.justify-content-between.align-items-center.mb-2
      h6.fs-md.mb-0 Laura Willson
      a(href=&quot;#&quot;).nav-link-style.fs-sm.fw-medium
        i.ci-reply.me-2
        | Reply
    p.fs-md.mb-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    span.fs-ms.text-muted
      i.ci-time.align-middle.me-2
      | Sep 7, 2019</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!-- Quick (anchor) navigation-->
        <div class="col-xxl-3 d-none d-xxl-block ps-5">
          <aside class="sticky-top pt-5">
            <div class="pt-5 mt-5">
              <div class="widget widget-links ps-4 border-start">
                <h3 class="widget-title">Jump to</h3>
                <ul class="widget-list">
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#testimonial">Testimonial</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#testimonials-carousel">Testimonials carousel</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#product-review">Product review</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#post-comment">Post comment</a>
                  </li>
                </ul>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll data-fixed-element><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="../vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="../vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="../vendor/prismjs/components/prism-core.min.js"></script>
    <script src="../vendor/prismjs/components/prism-markup.min.js"></script>
    <script src="../vendor/prismjs/components/prism-clike.min.js"></script>
    <script src="../vendor/prismjs/components/prism-javascript.min.js"></script>
    <script src="../vendor/prismjs/components/prism-pug.min.js"></script>
    <script src="../vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
    <script src="../vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <script src="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- Main theme script-->
    <script src="../js/theme.min.js"></script>
  </body>
</html>